<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { interceptor } from "@/utils/interceptor";
import { userStore } from "@/stores/userStore";
const router = useRouter();
const scores = ref([]);
const userUserStore = userStore();
const examId = ref("");
onMounted(() => {
  //------
  const httpInstance = interceptor();
  httpInstance
    .post("/student/score", {
      id: userUserStore.id,
    })
    .then((res) => {
      console.log("res.data.data:", res.data.data);
      for (let i = 0; i < res.data.data.length; i++) {
        scores.value.push({
          examId: res.data.data[i].examId,
          examName: res.data.data[i].examName,
          examScore: res.data.data[i].examScore,
          passingPoint: res.data.data[i].passingPoint,
          finalScore: res.data.data[i].finalScore,
        });
      }
    });
});

const goToDetail = (examId) => {
  router.push({
    name: "studentExamDetail",
    params: { examId },
  });
};
</script>
<template>
  <div v-if="scores && scores.length > 0">
    <div  v-for="score in scores" :key="score.examId" class="score">
      <div class="score-left">
        <ul>
          <li style="font-weight: 600; color: black">{{ score.examName }}</li>
          <li>试卷满分:{{ score.finalScore }} 及格分数线:{{ score.passingPoint }}分</li>
          <li>
            是否及格:<span
              :style="{ color: score.examScore >= score.passingPoint ? 'rgb(1, 205, 1)' : 'red' }"
              >{{ score.examScore >= score.passingPoint ? "是" : "否" }}</span>
          </li>
        </ul>
      </div>
      <div class="score-right">
        <ul>
          <li>总分：{{ score.examScore }}</li>
          <li class="detail" @click="goToDetail(score.examId)">查看详情</li>
        </ul>
      </div>
      <div class="score-right"></div>
    </div>
  </div>
  <div v-else class="noData">
    <img src="@/assets/img/noDataView.png" alt="No Data Found"/>
  </div>
</template>

<style scopeed lang="scss">
.score {
  margin-top: 3%;
  margin-left: 8%;
  margin-right: 8%;
  width: 80%;
  height: 15vh;

  display: flex;
  flex-direction: row;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);

  .score-left {
    width: 85%;
    height: 100%;
    background-color: rgb(152, 229, 236);
    display: flex;
    align-items: center;

    li {
      font-size: 150%;
      list-style: none;
      color: rgb(118, 118, 118);
    }
  }
  .score-right {
    display: flex;
    align-items: center;
    li {
      color: rgb(1, 205, 1);
      font-size: 200%;
      font-weight: 600;
      list-style: none;
    }
  }
  .detail {
    cursor: pointer;
  }
}
.noData{
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top:7%;
}
</style>
